<template>
  <div class="content flex gap10">
    <div class="status flex column aic gap10" @click.native="changeTypeHandle">
      <!-- <div class="status-item">全部</div> -->
      <div class="status-item" :class="{ check: params.type == 'active' }" data-type="active">下载中</div>
      <div class="status-item" :class="{ check: params.type == 'waiting' }" data-type="waiting">等待中</div>
      <div class="status-item" :class="{ check: params.type == 'stopped' }" data-type="stopped">已停止</div>
    </div>
    <div class="list flex column gap10">
      <DownHeader></DownHeader>
      <el-empty description="暂无数据" v-if="taskList.length === 0" />
      <div v-if="taskList.length !== 0">
        <downListItem :item="item" v-for="item in taskList" :key="item.gid"></downListItem>
      </div>
    </div>
  </div>
</template>

<script setup>
import DownHeader from "./components/downHeader.vue"
import downListItem from "./components/downListItem.vue"

import { useTaskStore } from "@/store/taskStore.js"
import { storeToRefs } from "pinia"
import { onMounted, ref, computed, provide } from "vue"



const taskStore = useTaskStore()

const { activeTaskList, waitingTaskList, stoppedTaskList } = storeToRefs(taskStore)

const taskList = computed(() => {
  let list = []
  switch (params.value.type) {
    case 'active':
      list = activeTaskList.value;
      break;
    case 'waiting':
      list = waitingTaskList.value;
      break;
    case 'stopped':
      list = stoppedTaskList.value;
      break;
  }
  return list;
})

const params = ref({
  offset: 0,
  num: 20,
  type: 'active'
})

provide('params', params)

const changeTypeHandle = (e) => {
  console.log(e)
  if (e.target.dataset.type && params.value.type !== e.target.dataset.type) {
    params.value.type = e.target.dataset.type
    params.value.offset = 0
    getList()
  }
}

const getList = () => {
  taskStore.getTaskList(params.value)
}



onMounted(() => {
  getList()
})

</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  max-height: 100%;

  .list {
    width: 100%;
    height: calc(100vh - 20px);
    padding-right: 6px;
    box-sizing: border-box;
    overflow: auto;

    .noData {
      width: 300px;
      margin: auto;
    }
  }

}

.status {
  width: 70px;
  height: 100%;
  border-radius: 16px;
  @include background_color("bg_menu_base2");
  @include font_color("font_base_in");
  font-size: 14px;
  padding: 20px 0px;
  box-sizing: border-box;

  &-item {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
  }

  .check {
    width: 80%;
    text-align: center;
    @include background_color("bg_menu_base");
    border-radius: 10px;
  }
}
</style>
